<template>
    <div>
        <a class="mui-up" v-show="flag" @click="backTop" title="回到顶部"><span class="mui-icon mui-icon-arrowup"></span></a>
    </div>
</template>
<script >
    export default {
        data(){
        return {
            // 用于显示回到顶部
                flag:false
            }
        },
        methods:{
            backTop(){
                document.documentElement.scrollTop=0
            },
            scrollTop(){
                // 假如滚动距离大于10就显示
                if (document.documentElement.scrollTop>10) {
                    this.flag=true
                }else{
                    this.flag=false
                }
            }
        },
        created(){
            this.scrollTop()
        },
        // 在钩子函数中监听这个滚动
        mounted(){
            window.addEventListener('scroll',this.scrollTop)
        }
    }
</script>

<style lang="scss" scpoed>
                .mui-up {
                width: 50px;
                height: 50px;
                display: block;
                text-align: center;
                background-color: #ccc;
                border: 1px solid #ddd;
                border-radius: 25px;
                position: fixed;
                bottom: 60px;
                right:15px;
                .mui-icon{
                    margin-top: 10px;
                }
            }

</style>